<template>
	<view class="changebd_page">
		<view class="topbar" :style="{'height':topHeight+'px'}"></view>
		<view class="nav_box">
			<u-icon class="icon" name="arrow-left" size="24" color="#FFFFFF" @click="back()"></u-icon>
			<view style="font-size: 32rpx;">{{type==1?'支付宝':'微信'}}更换绑定</view>
		</view>
		<view class="item" style="border-bottom: 2rpx #FAFAFA solid;">
			<view>手机号码</view>
			<input placeholder="请输入手机号码" />
		</view>
		<view class="item1">
			<view>验证码</view>
			<input placeholder="请输入验证码" />
			<view class="code_btn">获取验证码</view>
		</view>
		<view class="item" v-if="type==1">
			<view>支付宝账号</view>
			<input placeholder="请输入支付宝账号" />
		</view>
		<view class="item" v-else>
			<view>微信账号</view>
			<input placeholder="请输入微信账号" />
		</view>
		<view class="btn">确定修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topHeight: 0,
				type: 1,
			}
		},
		onLoad(e) {
			console.log(e);
			this.type=e.type
			uni.getSystemInfo({
				success: (res) => {
					this.topHeight = res.statusBarHeight || 24
					console.log(res.statusBarHeight);
				},
			});
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.changebd_page{
	width: 100%;
	height: 100vh;
	background-color: #F9F9F9;
	.topbar {
		background-color: #00CC7B;
	}
	.nav_box {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0rpx 32rpx;
		text-align: center;
		position: relative;
		background-color: #00CC7B;
		view {
			color: #FFFFFF;
			font-weight: bold;
		}
		.icon{
			position: absolute;
			top: 22rpx;
		}
	}
 
    .item{
    	width: 100%;
    	height: 104rpx;
    	padding: 32rpx;
    	display: flex;
    	background-color: #FFFFFF;
    	view{
    		width: 165rpx;
    		height: 100%;
    		font-size: 28rpx;
    		color: #333333;
    	}
    	input{
    		width: 80%;
    	}
    }
	.item1{
		width: 100%;
		height: 104rpx;
		padding: 32rpx;
		display: flex;
		background-color: #FFFFFF;
		border-top: 2rpx #FAFAFA solid;
		view{
			width: 165rpx;
			height: 100%;
			font-size: 28rpx;
			color: #333333;
		}
		input{
			width: 60%;
		}
		.code_btn{
			width: 150rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #00CC7B;
			border-radius: 110rpx;
			font-size: 24rpx;
			transform: translateY(-8rpx);
		}
	}
	.btn{
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #00CC7B;
		margin: auto;
		border-radius: 76rpx;
		transform: translateY(196rpx);
	}
}
</style>
